import L from "leaflet";
import "leaflet/dist/leaflet.css";
import shimen from "@/assets/json/shimen.json";
import AntPathPolyline from "@/tools/AntPathPolyline.js";
import { getPersonnelList } from "@/api/getAjaxData";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const makeMap = (type) => {
  const map = L.map("map", {
    preferCanvas: true,
  }).setView([29.396728, 111.193433], 8);

  L.tileLayer(
    "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
    {
      minZoom: 8,
      maxZoom: 18,
      attribution: "",
    }
  ).addTo(map);

  const geoLayerGroup = L.layerGroup().addTo(map);

  L.geoJSON(shimen, {
    style: {
      weight: 3,
      opacity: 1,
      color: "#0080FF", //边界颜色
      fillOpacity: 0,
      fillColor: "#0080FF", //填充颜色 默认透明度为0.2
    },
  }).addTo(geoLayerGroup);

  const layerGroup = L.layerGroup().addTo(map);

  const person = new AntPathPolyline();

  if (type === "polyLine") {
    person.drawPolyline(map, mapStore.polylineData, layerGroup, 0, 0);
  } else if (type === "point") {
    person.drawPoint(
      map,
      [mapStore.pointData.lat, mapStore.pointData.lon],
      mapStore.pointData.personName,
      mapStore.pointData.matchDevicePosition,
      mapStore.pointData.matchShotTime,
      layerGroup
    );
  } else if (type === "allPoint") {
    getPersonnelList({}).then((res) => {
      for (let i = 0; i < res["personTrack"].length; i++) {
        const person = new AntPathPolyline();
        person.drawAllPoints(map, res["personTrack"][i], layerGroup, i, i);
      }
    });
  }
};

export default makeMap;
